<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <title>蒙太奇马赛克</title>

        <link href="bootstrap.css" rel="stylesheet">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <style>
        html {width: 100%;}
        body {width: 100%;margin:0;
            /*background-color: black;*/
        }

        .image_mosaic{
            width:80%;
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

        }
	</style>


	<script src="/lib/socket.io.js"></script>
    <script src="/lib/moment.min.js"></script>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/app.js"></script>

	<script>

		var socket =  io.connect(ServerUrl);

		socket.on('connect', function() {
			console.log("Client has connected to the server!");
		});

		socket.on('mosaic', function(data) {
            $('#img_mosaic').attr('src',ResUrl + data);

		});

		socket.on('disconnect', function() {
            console.log("The client has disconnected!");
		});

        function sendDisconnect() {
                socket.disconnect();
        }

		function sendMessage() {


            var jsonObject = {};
            socket.emit('chatevent', jsonObject);
		}



	</script>
</head>

<body>
<div id="overlay" class="container"  style="padding: 0;width:100%;">

    <div class="row text-center" style="padding: 0;width:100%;">
        <img id="img_mosaic" class="image_mosaic" src="http://localhost:8088/res/mosaic_2018-02-25_19.00.24.jpg">
    </div>
</div>

</body>

</html>
